import QtQuick 2.0
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.3
import Quick.UIComponent.Text.Normal 0.1


Rectangle {
    id:root
    signal clicked

    radius: 12
    property color backGroud: "#55D166"
    property color hoverdColor: Qt.rgba(backGroud.r,backGroud.g,backGroud.b,0.8)
    property color highLightColor: Qt.rgba(backGroud.r,backGroud.g,backGroud.b,0.5)

    property string btnName:"Save"
    property bool down: false
    property bool isClicked: false
    property bool isHovered: false


    implicitHeight: 40
    width: height*3


    MText{
        text: btnName
        anchors.centerIn: parent
        pxSize: 24
        textColor: "white"
    }
    color: backGroud

    MouseArea{
        anchors.fill: parent

        onClicked: {
            root.state = isClicked ? "unClicked":  "clicked"
            emit:root.clicked();
        }
        onEntered: {
            root.state = "hovered"
        }
        onExited: {
            if(root.isHovered && (!root.isClicked) ){
                root.state = "normal"
            }
        }
        onPressed: {
            root.state = "pressed"
        }
        onReleased: {
            root.state = "normal"
        }
    }

    states: [
        State {
            name: "normal"
            PropertyChanges {
                target: root
                isHovered:false
            }
            PropertyChanges {
                target: pic
                scale:1
            }
        },
        State {
            name: "hovered"
            PropertyChanges {
                target: root
                isHovered:true
            }
            PropertyChanges {
                target: pic
                scale:1.4
            }
        },
        State {
            name: "clicked"
            PropertyChanges {
                target: root
                isClicked:true
            }
        },
        State {
            name: "unClicked"
            PropertyChanges {
                target: root
                isClicked:false
            }
        },
        State {
            name: "pressed"
            PropertyChanges {
                target: root
                down:true
            }
            PropertyChanges {
                target: pic
                scale:1.4
            }
        }
    ]
}
